<template>
    <div class="course-list">
        <div class="item" v-for="item in courseList" :key="item.id">
            <img :src="item.cover" alt="">
            <a>{{item.name}}</a>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Course",
        data() {
            return {
                courseList: [],
            }
        },
        create: function () {
            /* 组件创建完成之后自动触发【此时组件的对象已创建，但还未将页面相关的DOM创建并显示在页面上】
                - 可以去操作组件对象，例如：this.courseList = [11,22,33]
                - 不可以去操作DOM，例如：document.getElementById （未创建）
            */
            this.axios({
                method: "get",
                url: 'https://api.luffycity.com/api/v1/course/actual/?limit=5&offset=0',
                headers: {
                    "Content-Type": "application/json",
                },
            }).then((res) => {
                console.log(res);
                this.courseList = res.data.data.result;
            })
        }
    }
</script>

<style scoped>
    .course-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .course-list .item {
        width: 248px;
        padding: 10px;
        border: 1px solid #dddddd;
        margin-right: 5px;
        margin-top: 10px;
    }

    .course-list .item img {
        width: 100%;
        height: 120px;
    }
</style>